<template>
  <div style="display: block;">
    <label v-for="(opt, index) in options" :key="opt.id" style="display: flex;align-items: center;height:38.5px;">
      <input @click="radioClick(opt, index)" type="radio" :name="'radio-' + id" :value="opt.id" v-model="selectedOptionId"
        :checked="opt.isRight" />
      {{ String.fromCharCode(65 + index) }}
    </label>
  </div>
</template>

<script setup>
import { getCurrentInstance,  toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
const props = defineProps({
  options: {
    type: Array,
    default: []
  },
});
// 设置data响应式选中的选项ID
const selectedOptionId = ref(null);
const id = ref(Math.floor(Math.random() * 900000 + 100000))
onMounted(() => {
  // 初始化选中的选项ID为默认选中项的ID
  selectedOptionId.value = props.options.find(opt => opt.isRight)?.id || props.options[0].id;
})
const radioClick = (opt, index) => {
  props.options.forEach((res, i) => {
    res.isRight = false
    if (i == index) res.isRight = true
  })
}
</script>